<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zzh
  Date: 2022/4/20
  Time: 7:01 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级管理</title>
</head>
<body>
<div>
    <center>
        <div>
            <div><h2>${title}</h2></div>
            <div>班级管理</div>
            <div>
                <button onclick="addClass()">添加班级</button>
            </div>
            <div style="display: none" id="addClassDiv">
                <div>
                    <table border="1">
                        <tr>
                            <th>添加班级</th>
                        </tr>
                        <tr>
                            <th>
                                <table>
                                    <tr>
                                        <td>院系:</td>
                                        <td><select id="addCollageId" value="0">
                                            <c:forEach items="${tCollageList}" var="tCollage">
                                                <option value="${tCollage.collageId}">${tCollage.collageName}</option>
                                            </c:forEach>
                                        </select></td>
                                    </tr>
                                    <tr>
                                        <td>班级名称:</td>
                                        <td><input type="text" id="addClassName"></td>
                                    </tr>
                                </table>
                            </th>
                        </tr>
                        <tr>
                            <th>
                                <button onclick="addClassTrue()">确认添加</button>
                            </th>
                        </tr>
                    </table>
                </div>
            </div>
            <div>
                <div>
                    <table border="1">
                        <tr>
                            <th>班级id</th>
                            <th>班级名称</th>
                            <th>院系名称</th>
                            <th>学校名称</th>
                            <th>操作</th>
                        </tr>
                        <c:forEach items="${tClassList}" var="tClass">
                            <tr>
                                <th>${tClass.classId}</th>
                                <th>${tClass.className}</th>
                                <th>${tClass.collageName}</th>
                                <th>${tClass.schoolName}</th>
                                <th>
                                    <button onclick="changeClass(${tClass.classId},'${tClass.className}')">更改班级</button>
                                </th>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
                <div style="display: none" id="changeClassDiv">
                    <table border="1">
                        <tr>
                            <th>修改班级</th>
                        </tr>
                        <tr>
                            <th>
                                <table>
                                    <tr>
                                        <th>班级名称:</th>
                                        <th><input type="text" id="changeClassName"></th>
                                    </tr>
                                </table>
                            </th>
                        </tr>
                        <tr>
                            <th>
                                <button onclick="changeClassTrue()">确认修改</button>
                            </th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </center>
</div>
</body>
<script type="text/javascript" src="<c:url value="/static/js/jquery.js"/>"></script>
<script type="text/javascript">
    var classId;

    function addClass() {
        let addClassDiv = document.getElementById("addClassDiv");
        if (addClassDiv.style.display === "block") {
            addClassDiv.style.display = "none"
        } else {
            addClassDiv.style.display = "block"
        }
    }

    function changeClass(classId1, className) {
        let changeClassDiv = document.getElementById("changeClassDiv");
        classId = classId1;
        document.getElementById("changeClassName").value = className
        if (changeClassDiv.style.display === "block") {
            changeClassDiv.style.display = "none"
        } else {
            changeClassDiv.style.display = "block"
        }
    }

    function addClassTrue() {
        let addCollageId = document.getElementById("addCollageId").value
        let addClassName = document.getElementById("addClassName").value
        if (addCollageId.length > 0 && addClassName.length > 0) {
            if (confirm("确认添加？")) {
                var settings = {
                    "url": "${url}" + "/api/class/add",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                        "token": sessionStorage.getItem("token"),
                        "Content-Type": "application/json"
                    },
                    "data": JSON.stringify({
                        "collageId": addCollageId,
                        "className": addClassName
                    }),
                };

                $.ajax(settings).done(function (response) {
                    if (response.status === 200) {
                        alert("添加成功")
                        history.go(0)
                    } else {
                        alert(response.data.error)
                    }
                });
            }
        } else {
            alert("请输入班级名称或者选择院系")
        }
    }

    function changeClassTrue() {
        let changeClassName = document.getElementById("changeClassName").value
        if (changeClassName.length > 0) {
            if (confirm("确认修改？")) {
                var settings = {
                    "url": "${url}" + "/api/class/change",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                        "token": sessionStorage.getItem("token"),
                        "Content-Type": "application/json"
                    },
                    "data": JSON.stringify({
                        "classId": classId,
                        "className": changeClassName
                    }),
                };

                $.ajax(settings).done(function (response) {
                    if (response.status === 200) {
                        alert("修改成功")
                        history.go(0)
                    } else {
                        alert(response.data.error)
                    }
                });
            }
        } else {
            alert("请输入班级名称")
        }
    }
</script>
</html>
